<template>
	<div class="" style="background: #f7f8fa; width: 100%; min-height: 300px">
		<div v-for="(item, i) in configureList" :key="i">
			<el-row :key="item.id" class="mb-10">
				<el-col v-if="item.symbol" :span="2" class="rule-cell">
					<el-select v-model="item.symbol" placeholder="请选择类型">
						<el-option v-for="(item, index) in symbolList" :key="index" :label="item.label" :value="item.val" />
					</el-select>
				</el-col>
				<el-col :span="item.symbol ? 18 : 20" class="rule-cell">
					<el-select v-model="item.condition" placeholder="请选择类型" style="width: 100%">
						<el-option v-for="(data, index) in labelDataList" :key="index * (i + 1)" :label="data.name" :value="data.value" />
					</el-select>
				</el-col>

				<el-col :span="1" class="rule-cell">
					<el-icon style="line-height: 32px; display: inline-block; color: red; cursor: pointer" @click="delRule(item, i)"><RemoveFilled /></el-icon>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const treeToListData = ref([])
const configureList = ref([])
const labelDataList = ref([])

const symbolList = ref([
	{
		val: 'AND',
		label: '且'
	},
	{
		val: 'OR',
		label: '或'
	}
])

const addConfig = data => {
	labelDataList.value = data
	treeToListData.value = []

	configureList.value.push({
		name: '',
		id: new Date().getTime(),
		key: new Date().getTime(),
		symbol: 'AND',
		condition: ''
	})
}

const initConfigData = (andList, orList, data) => {
	console.log(data)
	labelDataList.value = data
	configureList.value = []
	// and 数据
	andList.forEach(item => {
		configureList.value.push({
			name: '',
			id: new Date().getTime(),
			symbol: 'AND',
			key: new Date().getTime(),
			condition: item
		})
	})

	// or 数据
	orList.forEach(item => {
		configureList.value.push({
			name: '',
			id: new Date().getTime(),
			symbol: 'OR',
			key: new Date().getTime(),
			condition: item
		})
	})
}

const delRule = (data, index) => {
	configureList.value.splice(index, 1)
}

defineExpose({
	addConfig,
	initConfigData,
	configureList
})
</script>